<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />

    

    
    <title>【自检】前端知识清单 | 李世奇的技术专栏</title>
    
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
        <meta name="keywords" content="-学习提升" />
    
    <meta name="description" content="开篇前端开发是一个非常特殊的行业，它的历史实际上不是很长，但是知识之繁杂，技术迭代速度之快是其他技术所不能比拟的。 winter在他的《重学前端》课程中提到：  到现在为止，前端工程师已经成为研发体系中的重要岗位之一。可是，与此相对的是，我发现极少或者几乎没有大学的计算机专业愿意开设前端课程，更没有系统性的教学方案出现。大部分前端工程师的知识，其实都是来自于实践和工作中零散的学习。  这样是一个非">
<meta name="keywords" content="-学习提升">
<meta property="og:type" content="article">
<meta property="og:title" content="【自检】前端知识清单">
<meta property="og:url" content="https://www.lisq.xyz/2019/04/26/【自检】前端知识清单/index.html">
<meta property="og:site_name" content="李世奇的技术专栏">
<meta property="og:description" content="开篇前端开发是一个非常特殊的行业，它的历史实际上不是很长，但是知识之繁杂，技术迭代速度之快是其他技术所不能比拟的。 winter在他的《重学前端》课程中提到：  到现在为止，前端工程师已经成为研发体系中的重要岗位之一。可是，与此相对的是，我发现极少或者几乎没有大学的计算机专业愿意开设前端课程，更没有系统性的教学方案出现。大部分前端工程师的知识，其实都是来自于实践和工作中零散的学习。  这样是一个非">
<meta property="og:locale" content="zh-CN">
<meta property="og:image" content="https://lsqimg-1257917459.cos.ap-beijing.myqcloud.com/blog/知识体系.png">
<meta property="og:updated_time" content="2019-04-28T04:07:15.843Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="【自检】前端知识清单">
<meta name="twitter:description" content="开篇前端开发是一个非常特殊的行业，它的历史实际上不是很长，但是知识之繁杂，技术迭代速度之快是其他技术所不能比拟的。 winter在他的《重学前端》课程中提到：  到现在为止，前端工程师已经成为研发体系中的重要岗位之一。可是，与此相对的是，我发现极少或者几乎没有大学的计算机专业愿意开设前端课程，更没有系统性的教学方案出现。大部分前端工程师的知识，其实都是来自于实践和工作中零散的学习。  这样是一个非">
<meta name="twitter:image" content="https://lsqimg-1257917459.cos.ap-beijing.myqcloud.com/blog/知识体系.png">
    

    

    

    <link rel="stylesheet" href="/libs/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/libs/titillium-web/styles.css">
    <link rel="stylesheet" href="/libs/source-code-pro/styles.css">

    <link rel="stylesheet" href="/css/style.css">

    <script src="/libs/jquery/3.3.1/jquery.min.js"></script>
    
    
        <link rel="stylesheet" href="/libs/lightgallery/css/lightgallery.min.css">
    
    
        <link rel="stylesheet" href="/libs/justified-gallery/justifiedGallery.min.css">
    
    
    


</head>


<body>
    <div id="wrap">
        <header id="header">
    <div id="header-outer" class="outer">
        <div class="container">
            <div class="container-inner">
                <div id="header-title">
                    <h1 class="logo-wrap">
                        <a href="/" class="logo"></a>
                    </h1>
                    
                </div>
                <div id="header-inner" class="nav-container">
                    <a id="main-nav-toggle" class="nav-icon fa fa-bars"></a>
                    <div class="nav-container-inner">
                        <ul id="main-nav">
                            
                                <li class="main-nav-list-item" >
                                    <a class="main-nav-list-link" href="/">主页</a>
                                </li>
                            
                                        
                                    
                                <li class="main-nav-list-item" >
                                    <a class="main-nav-list-link" href="https://mp.weixin.qq.com/s/dYZEHTgqvxGV7mL99JuxRQ">关于</a>
                                </li>
                            
                                <li class="main-nav-list-item" >
                                    <a class="main-nav-list-link" href="https://github.com/ConardLi/ConardLi.github.io">更新日志</a>
                                </li>
                            
                                <li class="main-nav-list-item" >
                                    <a class="main-nav-list-link" href="/me/navigation.html">index.导航</a>
                                </li>
                            
                        </ul>
                        <nav id="sub-nav">
                            <div id="search-form-wrap">

    <form class="search-form">
        <input type="text" class="ins-search-input search-form-input" placeholder="搜索" />
        <button type="submit" class="search-form-submit"></button>
    </form>
    <div class="ins-search">
    <div class="ins-search-mask"></div>
    <div class="ins-search-container">
        <div class="ins-input-wrapper">
            <input type="text" class="ins-search-input" placeholder="想要查找什么..." />
            <span class="ins-close ins-selectable"><i class="fa fa-times-circle"></i></span>
        </div>
        <div class="ins-section-wrapper">
            <div class="ins-section-container"></div>
        </div>
    </div>
</div>
<script>
(function (window) {
    var INSIGHT_CONFIG = {
        TRANSLATION: {
            POSTS: '文章',
            PAGES: '页面',
            CATEGORIES: '分类',
            TAGS: '标签',
            UNTITLED: '(未命名)',
        },
        ROOT_URL: '/',
        CONTENT_URL: '/content.json',
    };
    window.INSIGHT_CONFIG = INSIGHT_CONFIG;
})(window);
</script>
<script src="/js/insight.js"></script>

</div>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>
        <div class="container">
            <div class="main-body container-inner">
                <div class="main-body-inner">
                    <section id="main">
                        <div class="main-body-header">
    <h1 class="header">
    
    未分类
    </h1>
</div>

                        <div class="main-body-content">
                            <style>
    #article-toc.fixed {
        position: fixed;
        top: 30px;
        bottom: 30px;
        left: 32px;
        padding-top: 15px;
        z-index: 9999;
        background-color: antiquewhite;
        width: 200px;
        padding-left: 20px;
        padding-bottom: 30px;
        border-radius: 10px;
        border: 1px solid rgb(122, 122, 122);
        opacity: 0.8;
    }

    #article-toc-inner {
        padding: 10px;
        width: 200px;
        height: 100%;
        overflow: auto;
    }

    .toc-level-3 {
        margin-left: 20px;
    }

    #article-toc a {
        text-decoration: none;
        color: #333;
        padding: 3px 0;
        color: #000;
        font-weight: normal;
    }

    .toc-item {
        line-height: 30px;
        list-style-type: initial;
    }

    #tocbtn {
        position: fixed;
        top: 30%;
        left: 0px;
        padding: 5px 2px;
        width: 18px;
        word-wrap: break-word;
        background-color: rgb(242, 245, 247);
        box-shadow: rgba(118, 118, 118, 0.11) 2px 0px 5px 0px;
        opacity: 1;
        height: 94px;
        line-height: 16px;
        text-align: center;
        top: 33%;
        width: 30px;
        z-index: 1000000001;
        cursor: pointer;
        border-radius: 0px 4px 4px 0px;
        border-width: 1px 1px 1px;
        border-style: solid solid solid none;
        border-color: rgb(224, 228, 231) rgb(224, 228, 231) rgb(224, 228, 231);
        border-image: initial;
        border-left: none;
        padding: 6px;
        transition: right 0.4s ease-in 0.3s, opacity 0.5s ease-in 0.3s;
    }
</style>

<article id="post-【自检】前端知识清单"
    class="article article-single article-type-post"
    itemscope itemprop="blogPost">
    <div class="article-inner">
        
        <header class="article-header">
            
    
        <h1 class="article-title" itemprop="name">
        【自检】前端知识清单
        </h1>
    

        </header>
        
        
        <div class="article-meta">
            
    <div class="article-date">
        <a href="/2019/04/26/【自检】前端知识清单/" class="article-date">
            <time datetime="2019-04-26T01:11:22.000Z" itemprop="datePublished">2019-04-26</time>
        </a>
    </div>

            

            
    <div class="article-tag">
        <i class="fa fa-tag"></i>
        <a class="tag-link" href="/tags/学习提升/">-学习提升</a>
    </div>

            <span id="busuanzi_container_page_pv" style="position: relative;float: right;">
                本文总阅读量<span id="busuanzi_value_page_pv"></span>次
            </span>
        </div>
        
        
        <div class="article-entry" itemprop="articleBody">
            <h2 id="开篇"><a href="#开篇" class="headerlink" title="开篇"></a>开篇</h2><p>前端开发是一个非常特殊的行业，它的历史实际上不是很长，但是知识之繁杂，技术迭代速度之快是其他技术所不能比拟的。</p>
<p><code>winter</code>在他的《重学前端》课程中提到：</p>
<blockquote>
<p>到现在为止，前端工程师已经成为研发体系中的重要岗位之一。可是，与此相对的是，我发现极少或者几乎没有大学的计算机专业愿意开设前端课程，更没有系统性的教学方案出现。大部分前端工程师的知识，其实都是来自于实践和工作中零散的学习。</p>
</blockquote>
<p>这样是一个非常真实的现状，实际上很多前端开发者都是自学甚至转行过来的，前端入门简单，学习了几个<code>API</code>以后上手做项目也很简单，但是这往往成为了限制自身发展的瓶颈。</p>
<p>只是停留在会用阶段是远远不够的，我们还需要不断探索和深入。现在市面上并不缺少学习教程，技术文章，如果盲目的学习你会发现看过以后的知识留存率会很低，而且发现没有了解到的知识越来越多，这会让人产生焦虑。</p>
<p>实际上，除了坚持学习的强大的自驱力，你还需要一个很简单的学习方法。那就是：建立自己的知识体系。它能帮助你更系统性的学习，同时你也时刻能知道自己哪些地方是不足的。</p>
<p>我会把我工作和学习中接触到的知识全部归纳到我的知识体系中，其中不仅仅包括我已经学过的，还有很多我没有来得及学习的。</p>
<p>这不仅仅是我的知识体系，更是我时刻提醒自己的自检清单。</p>
<p>下面我会把我的自检清单分享给大家，你可以按照清单上的知识检测自己还有哪些不足和提升，我也建议大家建自己的知识体系，这样工作或者学习甚至面试时，你能快速定位到知识清单中的点，如果你有哪些我没归纳到的点，欢迎在评论区告诉我。</p>
<p><img src="https://lsqimg-1257917459.cos.ap-beijing.myqcloud.com/blog/知识体系.png" alt=""></p>
<h2 id="一、JavaScript基础"><a href="#一、JavaScript基础" class="headerlink" title="一、JavaScript基础"></a>一、JavaScript基础</h2><blockquote>
<p>前端工程师吃饭的家伙，深度、广度一样都不能差。</p>
</blockquote>
<h3 id="变量和类型"><a href="#变量和类型" class="headerlink" title="变量和类型"></a>变量和类型</h3><ul>
<li><p>1.<code>JavaScript</code>规定了几种语言类型</p>
</li>
<li><p>2.<code>JavaScript</code>对象的底层数据结构是什么</p>
</li>
<li><p>3.<code>Symbol</code>类型在实际开发中的应用、可手动实现一个简单的<code>Symbol</code></p>
</li>
<li><p>4.<code>JavaScript</code>中的变量在内存中的具体存储形式</p>
</li>
<li><p>5.基本类型对应的内置对象，以及他们之间的装箱拆箱操作</p>
</li>
<li><p>6.理解值类型和引用类型</p>
</li>
<li><p>7.<code>null</code>和<code>undefined</code>的区别</p>
</li>
<li><p>8.至少可以说出三种判断<code>JavaScript</code>数据类型的方式，以及他们的优缺点，如何准确的判断数组类型</p>
</li>
<li><p>9.可能发生隐式类型转换的场景以及转换原则，应如何避免或巧妙应用</p>
</li>
<li><p>10.出现小数精度丢失的原因，<code>JavaScript</code>可以存储的最大数字、最大安全数字，<code>JavaScript</code>处理大数字的方法、避免精度丢失的方法</p>
</li>
</ul>
<h3 id="原型和原型链"><a href="#原型和原型链" class="headerlink" title="原型和原型链"></a>原型和原型链</h3><ul>
<li><p>1.理解原型设计模式以及<code>JavaScript</code>中的原型规则</p>
</li>
<li><p>2.<code>instanceof</code>的底层实现原理，手动实现一个<code>instanceof</code></p>
</li>
<li><p>4.实现继承的几种方式以及他们的优缺点</p>
</li>
<li><p>5.至少说出一种开源项目(如<code>Node</code>)中应用原型继承的案例</p>
</li>
<li><p>6.可以描述<code>new</code>一个对象的详细过程，手动实现一个<code>new</code>操作符</p>
</li>
<li><p>7.理解<code>es6 class</code>构造以及继承的底层实现原理</p>
</li>
</ul>
<h3 id="作用域和闭包"><a href="#作用域和闭包" class="headerlink" title="作用域和闭包"></a>作用域和闭包</h3><ul>
<li><p>1.理解词法作用域和动态作用域</p>
</li>
<li><p>2.理解<code>JavaScript</code>的作用域和作用域链</p>
</li>
<li><p>3.理解<code>JavaScript</code>的执行上下文栈，可以应用堆栈信息快速定位问题</p>
</li>
<li><p>4.<code>this</code>的原理以及几种不同使用场景的取值</p>
</li>
<li><p>5.闭包的实现原理和作用，可以列举几个开发中闭包的实际应用</p>
</li>
<li><p>6.理解堆栈溢出和内存泄漏的原理，如何防止</p>
</li>
<li><p>7.如何处理循环的异步操作</p>
</li>
<li><p>8.理解模块化解决的实际问题，可列举几个模块化方案并理解其中原理</p>
</li>
</ul>
<h3 id="执行机制"><a href="#执行机制" class="headerlink" title="执行机制"></a>执行机制</h3><ul>
<li><p>1.为何<code>try</code>里面放<code>return</code>，<code>finally</code>还会执行，理解其内部机制</p>
</li>
<li><p>2.<code>JavaScript</code>如何实现异步编程，可以详细描述<code>EventLoop</code>机制</p>
</li>
<li><p>3.宏任务和微任务分别有哪些</p>
</li>
<li><p>4.可以快速分析一个复杂的异步嵌套逻辑，并掌握分析方法</p>
</li>
<li><p>5.使用<code>Promise</code>实现串行</p>
</li>
<li><p>6.<code>Node</code>与浏览器<code>EventLoop</code>的差异</p>
</li>
<li><p>7.如何在保证页面运行流畅的情况下处理海量数据</p>
</li>
</ul>
<h3 id="语法和API"><a href="#语法和API" class="headerlink" title="语法和API"></a>语法和API</h3><ul>
<li><p>1.理解<code>ECMAScript</code>和<code>JavaScript</code>的关系</p>
</li>
<li><p>2.熟练运用<code>es5</code>、<code>es6</code>提供的语法规范，</p>
</li>
<li><p>3.熟练掌握<code>JavaScript</code>提供的全局对象（例如<code>Date</code>、<code>Math</code>）、全局函数（例如<code>decodeURI</code>、<code>isNaN</code>）、全局属性（例如<code>Infinity</code>、<code>undefined</code>）</p>
</li>
<li><p>4.熟练应用<code>map</code>、<code>reduce</code>、<code>filter</code> 等高阶函数解决问题</p>
</li>
<li><p>5.<code>setInterval</code>需要注意的点，使用<code>settimeout</code>实现<code>setInterval</code></p>
</li>
<li><p>6.<code>JavaScript</code>提供的正则表达式<code>API</code>、可以使用正则表达式（邮箱校验、<code>URL</code>解析、去重等）解决常见问题</p>
</li>
<li><p>7.<code>JavaScript</code>异常处理的方式，统一的异常处理方案</p>
</li>
</ul>
<h2 id="二、HTML和CSS"><a href="#二、HTML和CSS" class="headerlink" title="二、HTML和CSS"></a>二、HTML和CSS</h2><h3 id="HTML"><a href="#HTML" class="headerlink" title="HTML"></a>HTML</h3><ul>
<li><p>1.从规范的角度理解<code>HTML</code>，从分类和语义的角度使用标签</p>
</li>
<li><p>2.常用页面标签的默认样式、自带属性、不同浏览器的差异、处理浏览器兼容问题的方式</p>
</li>
<li><p>3.元信息类标签(<code>head</code>、<code>title</code>、<code>meta</code>)的使用目的和配置方法</p>
</li>
<li><p>4.<code>HTML5</code>离线缓存原理</p>
</li>
<li><p>5.可以使用<code>Canvas API</code>、<code>SVG</code>等绘制高性能的动画</p>
</li>
</ul>
<h3 id="CSS"><a href="#CSS" class="headerlink" title="CSS"></a>CSS</h3><ul>
<li><p>1.<code>CSS</code>盒模型，在不同浏览器的差异</p>
</li>
<li><p>2.<code>CSS</code>所有选择器及其优先级、使用场景，哪些可以继承，如何运用<code>at</code>规则</p>
</li>
<li><p>3.<code>CSS</code>伪类和伪元素有哪些，它们的区别和实际应用</p>
</li>
<li><p>4.<code>HTML</code>文档流的排版规则，<code>CSS</code>几种定位的规则、定位参照物、对文档流的影响，如何选择最好的定位方式，雪碧图实现原理</p>
</li>
<li><p>5.水平垂直居中的方案、可以实现<code>6</code>种以上并对比它们的优缺点</p>
</li>
<li><p>6.<code>BFC</code>实现原理，可以解决的问题，如何创建<code>BFC</code></p>
</li>
<li><p>7.可使用<code>CSS</code>函数复用代码，实现特殊效果</p>
</li>
<li><p>8.<code>PostCSS</code>、<code>Sass</code>、<code>Less</code>的异同，以及使用配置，至少掌握一种</p>
</li>
<li><p>9.<code>CSS</code>模块化方案、如何配置按需加载、如何防止<code>CSS</code>阻塞渲染</p>
</li>
<li><p>10.熟练使用<code>CSS</code>实现常见动画，如渐变、移动、旋转、缩放等等</p>
</li>
<li><p>11.<code>CSS</code>浏览器兼容性写法，了解不同<code>API</code>在不同浏览器下的兼容性情况</p>
</li>
<li><p>12.掌握一套完整的响应式布局方案</p>
</li>
</ul>
<h3 id="手写"><a href="#手写" class="headerlink" title="手写"></a>手写</h3><ul>
<li><p>1.手写图片瀑布流效果</p>
</li>
<li><p>2.使用<code>CSS</code>绘制几何图形（圆形、三角形、扇形、菱形等）</p>
</li>
<li><p>3.使用纯<code>CSS</code>实现曲线运动（贝塞尔曲线）</p>
</li>
<li><p>4.实现常用布局（三栏、圣杯、双飞翼、吸顶），可是说出多种方式并理解其优缺点</p>
</li>
</ul>
<h2 id="三、计算机基础"><a href="#三、计算机基础" class="headerlink" title="三、计算机基础"></a>三、计算机基础</h2><blockquote>
<p>关于编译原理，不需要理解非常深入，但是最基本的原理和概念一定要懂，这对于学习一门编程语言非常重要</p>
</blockquote>
<h3 id="编译原理"><a href="#编译原理" class="headerlink" title="编译原理"></a>编译原理</h3><ul>
<li><p>1.理解代码到底是什么，计算机如何将代码转换为可以运行的目标程序</p>
</li>
<li><p>2.正则表达式的匹配原理和性能优化</p>
</li>
<li><p>3.如何将<code>JavaScript</code>代码解析成抽象语法树(<code>AST</code>) </p>
</li>
<li><p>4.<code>base64</code>的编码原理</p>
</li>
<li><p>5.几种进制的相互转换计算方法，在<code>JavaScript</code>中如何表示和转换</p>
</li>
</ul>
<h3 id="网络协议"><a href="#网络协议" class="headerlink" title="网络协议"></a>网络协议</h3><ul>
<li><p>1.理解什么是协议，了解<code>TCP/IP</code>网络协议族的构成，每层协议在应用程序中发挥的作用</p>
</li>
<li><p>2.三次握手和四次挥手详细原理，为什么要使用这种机制</p>
</li>
<li><p>3.有哪些协议是可靠，<code>TCP</code>有哪些手段保证可靠交付</p>
</li>
<li><p>4.<code>DNS</code>的作用、<code>DNS</code>解析的详细过程，<code>DNS</code>优化原理</p>
</li>
<li><p>5.<code>CDN</code>的作用和原理</p>
</li>
<li><p>6.<code>HTTP</code>请求报文和响应报文的具体组成，能理解常见请求头的含义，有几种请求方式，区别是什么</p>
</li>
<li><p>7.<code>HTTP</code>所有状态码的具体含义，看到异常状态码能快速定位问题</p>
</li>
<li><p>8.<code>HTTP1.1</code>、<code>HTTP2.0</code>带来的改变</p>
</li>
<li><p>9.<code>HTTPS</code>的加密原理，如何开启<code>HTTPS</code>，如何劫持<code>HTTPS</code>请求</p>
</li>
<li><p>10.理解<code>WebSocket</code>协议的底层原理、与<code>HTTP</code>的区别</p>
</li>
</ul>
<h3 id="设计模式"><a href="#设计模式" class="headerlink" title="设计模式"></a>设计模式</h3><ul>
<li><p>1.熟练使用前端常用的设计模式编写代码，如单例模式、装饰器模式、代理模式等</p>
</li>
<li><p>2.发布订阅模式和观察者模式的异同以及实际应用</p>
</li>
<li><p>3.可以说出几种设计模式在开发中的实际应用，理解框架源码中对设计模式的应用</p>
</li>
</ul>
<h2 id="四、数据结构和算法"><a href="#四、数据结构和算法" class="headerlink" title="四、数据结构和算法"></a>四、数据结构和算法</h2><blockquote>
<p>据我了解的大部分前端对这部分知识有些欠缺，甚至抵触，但是，如果突破更高的天花板，这部分知识是必不可少的，而且我亲身经历——非常有用！</p>
</blockquote>
<h3 id="JavaScript编码能力"><a href="#JavaScript编码能力" class="headerlink" title="JavaScript编码能力"></a>JavaScript编码能力</h3><ul>
<li><p>1.多种方式实现数组去重、扁平化、对比优缺点</p>
</li>
<li><p>2.多种方式实现深拷贝、对比优缺点</p>
</li>
<li><p>3.手写函数柯里化工具函数、并理解其应用场景和优势</p>
</li>
<li><p>4.手写防抖和节流工具函数、并理解其内部原理和应用场景</p>
</li>
<li><p>5.实现一个<code>sleep</code>函数</p>
</li>
</ul>
<h3 id="手动实现前端轮子"><a href="#手动实现前端轮子" class="headerlink" title="手动实现前端轮子"></a>手动实现前端轮子</h3><ul>
<li><p>1.手动实现<code>call、apply、bind</code></p>
</li>
<li><p>2.手动实现符合<code>Promise/A+</code>规范的<code>Promise</code>、手动实现<code>async await</code></p>
</li>
<li><p>3.手写一个<code>EventEmitter</code>实现事件发布、订阅</p>
</li>
<li><p>4.可以说出两种实现双向绑定的方案、可以手动实现</p>
</li>
<li><p>5.手写<code>JSON.stringify</code>、<code>JSON.parse</code></p>
</li>
<li><p>6.手写一个模版引擎，并能解释其中原理</p>
</li>
<li><p>7.手写<code>懒加载</code>、<code>下拉刷新</code>、<code>上拉加载</code>、<code>预加载</code>等效果</p>
</li>
</ul>
<h3 id="数据结构"><a href="#数据结构" class="headerlink" title="数据结构"></a>数据结构</h3><ul>
<li><p>1.理解常见数据结构的特点，以及他们在不同场景下使用的优缺点</p>
</li>
<li><p>2.理解<code>数组</code>、<code>字符串</code>的存储原理，并熟练应用他们解决问题</p>
</li>
<li><p>3.理解<code>二叉树</code>、<code>栈</code>、<code>队列</code>、<code>哈希表</code>的基本结构和特点，并可以应用它解决问题</p>
</li>
<li><p>4.了解<code>图</code>、<code>堆</code>的基本结构和使用场景</p>
</li>
</ul>
<h3 id="算法"><a href="#算法" class="headerlink" title="算法"></a>算法</h3><ul>
<li><p>1.可计算一个算法的时间复杂度和空间复杂度，可估计业务逻辑代码的耗时和内存消耗</p>
</li>
<li><p>2.至少理解五种排序算法的实现原理、应用场景、优缺点，可快速说出时间、空间复杂度</p>
</li>
<li><p>3.了解递归和循环的优缺点、应用场景、并可在开发中熟练应用</p>
</li>
<li><p>4.可应用<code>回溯算法</code>、<code>贪心算法</code>、<code>分治算法</code>、<code>动态规划</code>等解决复杂问题</p>
</li>
<li><p>5.前端处理海量数据的算法方案</p>
</li>
</ul>
<h2 id="五、运行环境"><a href="#五、运行环境" class="headerlink" title="五、运行环境"></a>五、运行环境</h2><p>我们需要理清语言和环境的关系：</p>
<blockquote>
<p><code>ECMAScript</code>描述了<code>JavaScript</code>语言的语法和基本对象规范</p>
</blockquote>
<blockquote>
<p>浏览器作为<code>JavaScript</code>的一种运行环境，为它提供了：文档对象模型（<code>DOM</code>），描述处理网页内容的方法和接口、浏览器对象模型（<code>BOM</code>），描述与浏览器进行交互的方法和接口</p>
</blockquote>
<blockquote>
<p>Node也是<code>JavaScript</code>的一种运行环境，为它提供了操作<code>I/O</code>、网络等<code>API</code></p>
</blockquote>
<h3 id="浏览器API"><a href="#浏览器API" class="headerlink" title="浏览器API"></a>浏览器API</h3><ul>
<li><p>1.浏览器提供的符合<code>W3C</code>标准的<code>DOM</code>操作<code>API</code>、浏览器差异、兼容性</p>
</li>
<li><p>2.浏览器提供的浏览器对象模型 (<code>BOM</code>)提供的所有全局<code>API</code>、浏览器差异、兼容性</p>
</li>
<li><p>3.大量<code>DOM</code>操作、海量数据的性能优化(合并操作、<code>Diff</code>、<code>requestAnimationFrame</code>等)</p>
</li>
<li><p>4.浏览器海量数据存储、操作性能优化</p>
</li>
<li><p>5.<code>DOM</code>事件流的具体实现机制、不同浏览器的差异、事件代理</p>
</li>
<li><p>6.前端发起网络请求的几种方式及其底层实现、可以手写原生<code>ajax</code>、<code>fetch</code>、可以熟练使用第三方库</p>
</li>
<li><p>7.浏览器的同源策略，如何避免同源策略，几种方式的异同点以及如何选型</p>
</li>
<li><p>8.浏览器提供的几种存储机制、优缺点、开发中正确的选择</p>
</li>
<li><p>9.浏览器跨标签通信</p>
</li>
</ul>
<h3 id="浏览器原理"><a href="#浏览器原理" class="headerlink" title="浏览器原理"></a>浏览器原理</h3><ul>
<li><p>1.各浏览器使用的<code>JavaScript</code>引擎以及它们的异同点、如何在代码中进行区分</p>
</li>
<li><p>2.请求数据到请求结束与服务器进行了几次交互</p>
</li>
<li><p>3.可详细描述浏览器从输入<code>URL</code>到页面展现的详细过程</p>
</li>
<li><p>4.浏览器解析<code>HTML</code>代码的原理，以及构建<code>DOM</code>树的流程</p>
</li>
<li><p>5.浏览器如何解析<code>CSS</code>规则，并将其应用到<code>DOM</code>树上</p>
</li>
<li><p>6.浏览器如何将解析好的带有样式的<code>DOM</code>树进行绘制</p>
</li>
<li><p>7.浏览器的运行机制，如何配置资源异步同步加载</p>
</li>
<li><p>8.浏览器回流与重绘的底层原理，引发原因，如何有效避免</p>
</li>
<li><p>9.浏览器的垃圾回收机制，如何避免内存泄漏</p>
</li>
<li><p>10.浏览器采用的缓存方案，如何选择和控制合适的缓存方案</p>
</li>
</ul>
<h3 id="Node"><a href="#Node" class="headerlink" title="Node"></a>Node</h3><ul>
<li><p>1.理解<code>Node</code>在应用程序中的作用，可以使用<code>Node</code>搭建前端运行环境、使用<code>Node</code>操作文件、操作数据库等等</p>
</li>
<li><p>2.掌握一种<code>Node</code>开发框架，如<code>Express</code>，<code>Express</code>和<code>Koa</code>的区别</p>
</li>
<li><p>3.熟练使用<code>Node</code>提供的<code>API</code>如<code>Path</code>、<code>Http</code>、<code>Child Process</code>等并理解其实现原理</p>
</li>
<li><p>4.<code>Node</code>的底层运行原理、和浏览器的异同</p>
</li>
<li><p>5.<code>Node</code>事件驱动、非阻塞机制的实现原理</p>
</li>
</ul>
<h2 id="六、框架和类库"><a href="#六、框架和类库" class="headerlink" title="六、框架和类库"></a>六、框架和类库</h2><blockquote>
<p>轮子层出不穷，从原理上理解才是正道</p>
</blockquote>
<h3 id="TypeScript"><a href="#TypeScript" class="headerlink" title="TypeScript"></a>TypeScript</h3><ul>
<li><p>1.理解<code>泛型</code>、<code>接口</code>等面向对象的相关概念，<code>TypeScript</code>对面向对象理念的实现</p>
</li>
<li><p>2.理解使用<code>TypeScript</code>的好处，掌握<code>TypeScript</code>基础语法</p>
</li>
<li><p>3.<code>TypeScript</code>的规则检测原理</p>
</li>
<li><p>4.可以在<code>React</code>、<code>Vue</code>等框架中使用<code>TypeScript</code>进行开发</p>
</li>
</ul>
<h3 id="React"><a href="#React" class="headerlink" title="React"></a>React</h3><ul>
<li><p>1.<code>React</code>和<code>vue</code>选型和优缺点、核心架构的区别</p>
</li>
<li><p>2.<code>React</code>中<code>setState</code>的执行机制，如何有效的管理状态</p>
</li>
<li><p>3.<code>React</code>的事件底层实现机制</p>
</li>
<li><p>4.<code>React</code>的虚拟<code>DOM</code>和<code>Diff</code>算法的内部实现</p>
</li>
<li><p>5.<code>React</code>的<code>Fiber</code>工作原理，解决了什么问题</p>
</li>
<li><p>6.<code>React Router</code>和<code>Vue Router</code>的底层实现原理、动态加载实现原理</p>
</li>
<li><p>7.可熟练应用<code>React API</code>、生命周期等，可应用<code>HOC</code>、<code>render props</code>、<code>Hooks</code>等高阶用法解决问题</p>
</li>
<li><p>8.基于<code>React</code>的特性和原理，可以手动实现一个简单的<code>React</code></p>
</li>
</ul>
<h3 id="Vue"><a href="#Vue" class="headerlink" title="Vue"></a>Vue</h3><ul>
<li><p>1.熟练使用<code>Vue</code>的<code>API</code>、生命周期、钩子函数</p>
</li>
<li><p>2.<code>MVVM</code>框架设计理念</p>
</li>
<li><p>3.<code>Vue</code>双向绑定实现原理、<code>Diff</code>算法的内部实现</p>
</li>
<li><p>4.<code>Vue</code>的事件机制</p>
</li>
<li><p>5.从<code>template</code>转换成真实<code>DOM</code>的实现机制</p>
</li>
</ul>
<h3 id="多端开发"><a href="#多端开发" class="headerlink" title="多端开发"></a>多端开发</h3><ul>
<li><p>1.单页面应用（<code>SPA</code>）的原理和优缺点，掌握一种快速开发<code>SPA</code>的方案</p>
</li>
<li><p>2.理解<code>Viewport</code>、<code>em</code>、<code>rem</code>的原理和用法，分辨率、<code>px</code>、<code>ppi</code>、<code>dpi</code>、<code>dp</code>的区别和实际应用</p>
</li>
<li><p>3.移动端页面适配解决方案、不同机型适配方案</p>
</li>
<li><p>4.掌握一种<code>JavaScript</code>移动客户端开发技术，如<code>React Native</code>：可以搭建<code>React Native</code>开发环境，熟练进行开发，可理解<code>React Native</code>的运作原理，不同端适配</p>
</li>
<li><p>5.掌握一种<code>JavaScript</code> <code>PC</code>客户端开发技术，如<code>Electron</code>：可搭建<code>Electron</code>开发环境，熟练进行开发，可理解<code>Electron</code>的运作原理</p>
</li>
<li><p>6.掌握一种小程序开发框架或原生小程序开发</p>
</li>
<li><p>7.理解多端框架的内部实现原理，至少了解一个多端框架的使用</p>
</li>
</ul>
<h3 id="数据流管理"><a href="#数据流管理" class="headerlink" title="数据流管理"></a>数据流管理</h3><ul>
<li><p>1.掌握<code>React</code>和<code>Vue</code>传统的跨组件通信方案，对比采用数据流管理框架的异同</p>
</li>
<li><p>2.熟练使用<code>Redux</code>管理数据流，并理解其实现原理，中间件实现原理</p>
</li>
<li><p>3.熟练使用<code>Mobx</code>管理数据流，并理解其实现原理，相比<code>Redux</code>有什么优势</p>
</li>
<li><p>4.熟练使用<code>Vuex</code>管理数据流，并理解其实现原理</p>
</li>
<li><p>5.以上数据流方案的异同和优缺点，不情况下的技术选型</p>
</li>
</ul>
<h3 id="实用库"><a href="#实用库" class="headerlink" title="实用库"></a>实用库</h3><ul>
<li><p>1.至少掌握一种<code>UI</code>组件框架，如<code>antd design</code>，理解其设计理念、底层实现</p>
</li>
<li><p>2.掌握一种图表绘制框架，如<code>Echart</code>，理解其设计理念、底层实现，可以自己实现图表</p>
</li>
<li><p>3.掌握一种<code>GIS</code>开发框架，如百度地图<code>API</code></p>
</li>
<li><p>4.掌握一种可视化开发框架，如<code>Three.js</code>、<code>D3</code></p>
</li>
<li><p>5.工具函数库，如<code>lodash</code>、<code>underscore</code>、<code>moment</code>等，理解使用的工具类或工具函数的具体实现原理</p>
</li>
</ul>
<h3 id="开发和调试"><a href="#开发和调试" class="headerlink" title="开发和调试"></a>开发和调试</h3><ul>
<li><p>1.熟练使用各浏览器提供的调试工具</p>
</li>
<li><p>2.熟练使用一种代理工具实现请求代理、抓包，如<code>charls</code></p>
</li>
<li><p>3.可以使用<code>Android</code>、<code>IOS</code>模拟器进行调试，并掌握一种真机调试方案</p>
</li>
<li><p>4.了解<code>Vue</code>、<code>React</code>等框架调试工具的使用</p>
</li>
</ul>
<h2 id="七、前端工程"><a href="#七、前端工程" class="headerlink" title="七、前端工程"></a>七、前端工程</h2><blockquote>
<p>前端工程化：以工程化方法和工具提高开发生产效率、降低维护难度</p>
</blockquote>
<h3 id="项目构建"><a href="#项目构建" class="headerlink" title="项目构建"></a>项目构建</h3><ul>
<li><p>1.理解<code>npm</code>、<code>yarn</code>依赖包管理的原理，两者的区别</p>
</li>
<li><p>2.可以使用<code>npm</code>运行自定义脚本</p>
</li>
<li><p>3.理解<code>Babel</code>、<code>ESLint</code>、<code>webpack</code>等工具在项目中承担的作用</p>
</li>
<li><p>4.<code>ESLint</code>规则检测原理，常用的<code>ESLint</code>配置</p>
</li>
<li><p>5.<code>Babel</code>的核心原理，可以自己编写一个<code>Babel</code>插件</p>
</li>
<li><p>6.可以配置一种前端代码兼容方案，如<code>Polyfill</code></p>
</li>
<li><p>7.<code>Webpack</code>的编译原理、构建流程、热更新原理，<code>chunk</code>、<code>bundle</code>和<code>module</code>的区别和应用</p>
</li>
<li><p>8.可熟练配置已有的<code>loaders</code>和<code>plugins</code>解决问题，可以自己编写<code>loaders</code>和<code>plugins</code></p>
</li>
</ul>
<h3 id="nginx"><a href="#nginx" class="headerlink" title="nginx"></a>nginx</h3><ul>
<li><p>1.正向代理与反向代理的特点和实例</p>
</li>
<li><p>2.可手动搭建一个简单的<code>nginx</code>服务器、</p>
</li>
<li><p>3.熟练应用常用的<code>nginx</code>内置变量，掌握常用的匹配规则写法</p>
</li>
<li><p>4.可以用<code>nginx</code>实现请求过滤、配置<code>gzip</code>、负载均衡等，并能解释其内部原理</p>
</li>
</ul>
<h3 id="开发提速"><a href="#开发提速" class="headerlink" title="开发提速"></a>开发提速</h3><ul>
<li><p>1.熟练掌握一种接口管理、接口<code>mock</code>工具的使用，如<code>yapi</code></p>
</li>
<li><p>2.掌握一种高效的日志埋点方案，可快速使用日志查询工具定位线上问题</p>
</li>
<li><p>3.理解<code>TDD</code>与<code>BDD</code>模式，至少会使用一种前端单元测试框架</p>
</li>
</ul>
<h3 id="版本控制"><a href="#版本控制" class="headerlink" title="版本控制"></a>版本控制</h3><ul>
<li><p>1.理解<code>Git</code>的核心原理、工作流程、和<code>SVN</code>的区别</p>
</li>
<li><p>2.熟练使用常规的<code>Git</code>命令、<code>git rebase</code>、<code>git stash</code>等进阶命令</p>
</li>
<li><p>3.可以快速解决<code>线上分支回滚</code>、<code>线上分支错误合并</code>等复杂问题</p>
</li>
</ul>
<h3 id="持续集成"><a href="#持续集成" class="headerlink" title="持续集成"></a>持续集成</h3><ul>
<li><p>1.理解<code>CI/CD</code>技术的意义，至少熟练掌握一种<code>CI/CD</code>工具的使用，如<code>Jenkins</code></p>
</li>
<li><p>2.可以独自完成架构设计、技术选型、环境搭建、全流程开发、部署上线等一套完整的开发流程（包括<code>Web</code>应用、移动客户端应用、<code>PC</code>客户端应用、小程序、<code>H5</code>等等）</p>
</li>
</ul>
<h2 id="八、项目和业务"><a href="#八、项目和业务" class="headerlink" title="八、项目和业务"></a>八、项目和业务</h2><h3 id="后端技能"><a href="#后端技能" class="headerlink" title="后端技能"></a>后端技能</h3><ul>
<li><p>1.了解后端的开发方式，在应用程序中的作用，至少会使用一种后端语言</p>
</li>
<li><p>2.掌握数据最终在数据库中是如何落地存储的，能看懂表结构设计、表之间的关联，至少会使用一种数据库</p>
</li>
</ul>
<h3 id="性能优化"><a href="#性能优化" class="headerlink" title="性能优化"></a>性能优化</h3><ul>
<li><p>1.了解前端性能衡量指标、性能监控要点，掌握一种前端性能监控方案</p>
</li>
<li><p>2.了解常见的<code>Web</code>、<code>App</code>性能优化方案</p>
</li>
<li><p>3.<code>SEO</code>排名规则、<code>SEO</code>优化方案、前后端分离的<code>SEO</code></p>
</li>
<li><p>4.<code>SSR</code>实现方案、优缺点、及其性能优化</p>
</li>
<li><p>5.<code>Webpack</code>的性能优化方案</p>
</li>
<li><p>6.<code>Canvas</code>性能优化方案</p>
</li>
<li><p>7.<code>React</code>、<code>Vue</code>等框架使用性能优化方案</p>
</li>
</ul>
<h3 id="前端安全"><a href="#前端安全" class="headerlink" title="前端安全"></a>前端安全</h3><ul>
<li><p>1.<code>XSS</code>攻击的原理、分类、具体案例，前端如何防御</p>
</li>
<li><p>2.<code>CSRF</code>攻击的原理、具体案例，前端如何防御</p>
</li>
<li><p>3.<code>HTTP</code>劫持、页面劫持的原理、防御措施</p>
</li>
</ul>
<h3 id="业务相关"><a href="#业务相关" class="headerlink" title="业务相关"></a>业务相关</h3><ul>
<li><p>1.能理解所开发项目的整体业务形态、业务目标、业务架构，可以快速定位线上业务问题</p>
</li>
<li><p>2.能理解所开发项目整体的技术架构、能快读的根据新需求进行开发规划、能快速根据业务报警、线上日志等定位并解决线上技术问题</p>
</li>
<li><p>3.可以将自己的想法或新技术在业务中落地实践，尽量在团队中拥有一定的不可替代性</p>
</li>
</ul>
<h2 id="九、学习提升"><a href="#九、学习提升" class="headerlink" title="九、学习提升"></a>九、学习提升</h2><p><code>vczh</code>大神在知乎问题【如何能以后达到温赵轮三位大神的水平？】下的回答：</p>
<p>这十几年我一共做了三件事：</p>
<ul>
<li>1、不以赚钱为目的选择学习的内容；</li>
<li>2、以自己是否能造出轮子来衡量学习的效果；</li>
<li>3、坚持每天写自己的代码，前10年每天至少6个小时，不包含学习和工作的时间。</li>
</ul>
<blockquote>
<p>上面几点可能有点难，第一点我就做不到，但是做到下面绩点还是比较容易的。</p>
</blockquote>
<blockquote>
<p>关于写博客说明下，能给别人讲明白的知识会比自己学习掌握的要深刻许多</p>
</blockquote>
<ul>
<li><p>1.拥有自己的技术博客，或者在一些博客平台上拥有自己的专栏</p>
</li>
<li><p>2.定期的将知识进行总结，不断完善自己的知识体系</p>
</li>
<li><p>3.尽量将自己的知识转换成真实的产出，不要仅仅停留在书面理解层面，更重要的是实际应用</p>
</li>
<li><p>4.坚持输出<code>自己</code>的代码，不要盲目的扎进公司业</p>
</li>
</ul>
<h2 id="十、技术之外"><a href="#十、技术之外" class="headerlink" title="十、技术之外"></a>十、技术之外</h2><blockquote>
<p>这部分可能比上面九条加起来重要！</p>
</blockquote>
<ul>
<li><p>1.了解互联网人员术语：<code>CEO</code>、<code>CTO</code>、<code>COO</code>、<code>CFO</code>、<code>PM</code>、<code>QA</code>、<code>UI</code>、<code>FE</code>、<code>DEV</code>、<code>DBA</code>、<code>OPS</code>等</p>
</li>
<li><p>2.了解互联网行业术语：<code>B2B</code>、<code>B2C</code>、<code>C2C</code>、<code>O2O</code>等</p>
</li>
<li><p>3.掌握互联网行业沟通、问答、学习的</p>
</li>
<li><p>4.有一定的<code>&quot;PPT&quot;</code>能力</p>
</li>
<li><p>5.有一定的理财意识，至少了解储蓄、货币基金、保险、指数基金、股票等基本的理财知识</p>
</li>
<li><p>6.掌握在繁重的工作和长期的电脑辐射的情况下保持健康的方法，建立正确的养生知识体系</p>
</li>
</ul>
<h2 id="十一、资源推荐"><a href="#十一、资源推荐" class="headerlink" title="十一、资源推荐"></a>十一、资源推荐</h2><p>有了知识体系，在阅读一篇技术文章的时候就很容易把它归类，我一直以来就是这样做的。</p>
<p>事实证明，在阅读文章或书籍时，有目的和归类的阅读比”随便看看”后的只是留存率要高很多。</p>
<p>每阅读到一篇好的文章或者书籍，我都会收藏并归类到我的知识体系中。</p>
<p>下面是一些我觉得还不错的文章、博客或者书籍教程等等，分享给大家，资源不多，但都是精品。</p>
<p>学习一门知识，最好先阅读官方文档，把所有的<code>API</code>大概浏览一遍，再继续看大佬们总结的进阶知识，什么东西是搬运过来的，什么是干货，一目了然。</p>
<h3 id="语言基础"><a href="#语言基础" class="headerlink" title="语言基础"></a>语言基础</h3><ul>
<li><p>[📚]<code>JavaScript</code>高级程序设计（必看）：<a href="https://book.douban.com/subject/10546125/" target="_blank" rel="noopener">https://book.douban.com/subject/10546125/</a></p>
</li>
<li><p>[📚]高性能<code>JavaScript</code>：<a href="https://book.douban.com/subject/5362856/" target="_blank" rel="noopener">https://book.douban.com/subject/5362856/</a></p>
</li>
<li><p>现代<code>JavaScript</code>教程：<a href="https://zh.javascript.info/" target="_blank" rel="noopener">https://zh.javascript.info/</a></p>
</li>
<li><p>阮一峰的<code>ECMAScript 6</code>教程：<a href="http://es6.ruanyifeng.com/" target="_blank" rel="noopener">http://es6.ruanyifeng.com/</a></p>
</li>
<li><p><code>ECMAScript 6</code>标准：<a href="https://www.ecma-international.org/ecma-262/6.0/" target="_blank" rel="noopener">https://www.ecma-international.org/ecma-262/6.0/</a></p>
</li>
<li><p><code>HTML meta</code>标签总结与属性使用介绍：<a href="https://segmentfault.com/a/1190000004279791" target="_blank" rel="noopener">https://segmentfault.com/a/1190000004279791</a></p>
</li>
<li><p><code>CSS</code>编码指导：<a href="https://github.com/chadluo/CSS-Guidelines/blob/master/README.md" target="_blank" rel="noopener">https://github.com/chadluo/CSS-Guidelines/blob/master/README.md</a></p>
</li>
</ul>
<h3 id="计算机基础"><a href="#计算机基础" class="headerlink" title="计算机基础"></a>计算机基础</h3><ul>
<li><p>大前端开发者需要了解的基础编译原理和语言知识：<a href="http://fullstack.blog/2017/06/24/%E5%A4%A7%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%80%85%E9%9C%80%E8%A6%81%E4%BA%86%E8%A7%A3%E7%9A%84%E5%9F%BA%E7%A1%80%E7%BC%96%E8%AF%91%E5%8E%9F%E7%90%86%E5%92%8C%E8%AF%AD%E8%A8%80%E7%9F%A5%E8%AF%86" target="_blank" rel="noopener">http://fullstack.blog/2017/06/24/%E5%A4%A7%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%80%85%E9%9C%80%E8%A6%81%E4%BA%86%E8%A7%A3%E7%9A%84%E5%9F%BA%E7%A1%80%E7%BC%96%E8%AF%91%E5%8E%9F%E7%90%86%E5%92%8C%E8%AF%AD%E8%A8%80%E7%9F%A5%E8%AF%86</a></p>
</li>
<li><p>图解<code>HTTP</code>：<a href="https://book.douban.com/subject/25863515/" target="_blank" rel="noopener">https://book.douban.com/subject/25863515/</a></p>
</li>
<li><p>[📚]<code>JavaScript</code>设计模式与开发实践：<a href="https://book.douban.com/subject/26382780/" target="_blank" rel="noopener">https://book.douban.com/subject/26382780/</a></p>
</li>
<li><p>正则表达式30分钟入门教程：<a href="https://link.juejin.im/?target=https%3A%2F%2Fdeerchao.net%2Ftutorials%2Fregex%2Fregex.htm" target="_blank" rel="noopener">https://link.juejin.im/?target=https%3A%2F%2Fdeerchao.net%2Ftutorials%2Fregex%2Fregex.htm</a></p>
</li>
</ul>
<h3 id="数据结构和算法"><a href="#数据结构和算法" class="headerlink" title="数据结构和算法"></a>数据结构和算法</h3><ul>
<li><p>数据结构与算法之美：<a href="https://time.geekbang.org/column/intro/126" target="_blank" rel="noopener">https://time.geekbang.org/column/intro/126</a></p>
</li>
<li><p>用动画的形式呈现解<code>LeetCode</code>题目的思路：<a href="https://github.com/MisterBooo/LeetCodeAnimation" target="_blank" rel="noopener">https://github.com/MisterBooo/LeetCodeAnimation</a></p>
</li>
<li><p><code>JavaScript</code>数据结构和算法：<a href="https://github.com/ConardLi/awesome-coding-js" target="_blank" rel="noopener">https://github.com/ConardLi/awesome-coding-js</a></p>
</li>
<li><p><code>30-seconds-of-code</code>（里面有很多<code>js</code>代码非常巧妙，我正在将它翻译成中文）：<a href="https://github.com/ConardLi/30-seconds-of-code-Zh-CN" target="_blank" rel="noopener">https://github.com/ConardLi/30-seconds-of-code-Zh-CN</a></p>
</li>
</ul>
<h3 id="运行环境"><a href="#运行环境" class="headerlink" title="运行环境"></a>运行环境</h3><ul>
<li><p>《重学前端》中的浏览器原理章节：<a href="https://time.geekbang.org/column/article/80240" target="_blank" rel="noopener">https://time.geekbang.org/column/article/80240</a></p>
</li>
<li><p>图解浏览器的基本工作原理：<a href="https://zhuanlan.zhihu.com/p/47407398" target="_blank" rel="noopener">https://zhuanlan.zhihu.com/p/47407398</a></p>
</li>
<li><p>七天学会<code>NodeJS</code>：<a href="https://github.com/nqdeng/7-days-nodejs" target="_blank" rel="noopener">https://github.com/nqdeng/7-days-nodejs</a></p>
</li>
<li><p><code>Node.js</code>模块加载与运行原理：<a href="https://efe.baidu.com/blog/nodejs-module-analyze/" target="_blank" rel="noopener">https://efe.baidu.com/blog/nodejs-module-analyze/</a></p>
</li>
</ul>
<h3 id="框架和类库"><a href="#框架和类库" class="headerlink" title="框架和类库"></a>框架和类库</h3><ul>
<li><p><code>TypeScript Handbook</code>：<a href="https://zhongsp.gitbooks.io/typescript-handbook/content/" target="_blank" rel="noopener">https://zhongsp.gitbooks.io/typescript-handbook/content/</a></p>
</li>
<li><p><code>React.js</code>小书：<a href="http://huziketang.mangojuice.top/books/react/" target="_blank" rel="noopener">http://huziketang.mangojuice.top/books/react/</a></p>
</li>
<li><p><code>React</code>深入系列：<a href="https://juejin.im/post/5cad39b3f265da03502b1c0a" target="_blank" rel="noopener">https://juejin.im/post/5cad39b3f265da03502b1c0a</a></p>
</li>
<li><p><code>Webpack React</code>小书：<a href="https://fakefish.github.io/react-webpack-cookbook/index.html" target="_blank" rel="noopener">https://fakefish.github.io/react-webpack-cookbook/index.html</a></p>
</li>
<li><p><code>Vue.js</code>技术揭秘：<a href="https://github.com/ustbhuangyi/vue-analysis" target="_blank" rel="noopener">https://github.com/ustbhuangyi/vue-analysis</a></p>
</li>
<li><p><code>Vuex</code>-在<code>Vue</code>中管理状态：<a href="https://sabe.io/tutorials/getting-started-with-vuex" target="_blank" rel="noopener">https://sabe.io/tutorials/getting-started-with-vuex</a></p>
</li>
<li><p>你需要<code>Mobx</code>还是<code>Redux</code>？：<a href="https://juejin.im/post/5a7fd72c5188257a766324ae" target="_blank" rel="noopener">https://juejin.im/post/5a7fd72c5188257a766324ae</a></p>
</li>
<li><p><code>Underscore</code>源码分析：<a href="https://yoyoyohamapi.gitbooks.io/undersercore-analysis/content/" target="_blank" rel="noopener">https://yoyoyohamapi.gitbooks.io/undersercore-analysis/content/</a></p>
</li>
<li><p>微信小程序开发资源汇总：<a href="https://github.com/justjavac/awesome-wechat-weapp" target="_blank" rel="noopener">https://github.com/justjavac/awesome-wechat-weapp</a></p>
</li>
<li><p>腾讯移动<code>Web</code>前端知识库：<a href="https://github.com/AlloyTeam/Mars" target="_blank" rel="noopener">https://github.com/AlloyTeam/Mars</a></p>
</li>
</ul>
<h3 id="前端工程"><a href="#前端工程" class="headerlink" title="前端工程"></a>前端工程</h3><ul>
<li><p>一口（很长的）气了解<code>babel</code>：<a href="https://zhuanlan.zhihu.com/p/43249121" target="_blank" rel="noopener">https://zhuanlan.zhihu.com/p/43249121</a></p>
</li>
<li><p><code>Webpack</code>傻瓜式指南：<a href="https://zhuanlan.zhihu.com/p/20367175" target="_blank" rel="noopener">https://zhuanlan.zhihu.com/p/20367175</a></p>
</li>
<li><p><code>Webpack</code>原理：<a href="https://segmentfault.com/a/1190000015088834?utm_source=tag-newest" target="_blank" rel="noopener">https://segmentfault.com/a/1190000015088834?utm_source=tag-newest</a></p>
</li>
<li><p>廖雪峰的<code>git</code>教程：<a href="https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000" target="_blank" rel="noopener">https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000</a></p>
</li>
<li><p>图解<code>Git</code>：<a href="https://marklodato.github.io/visual-git-guide/index-zh-cn.html" target="_blank" rel="noopener">https://marklodato.github.io/visual-git-guide/index-zh-cn.html</a></p>
</li>
<li><p>前端开发者必备的<code>Nginx</code>知识：<a href="https://juejin.im/post/5c85a64d6fb9a04a0e2e038c" target="_blank" rel="noopener">https://juejin.im/post/5c85a64d6fb9a04a0e2e038c</a></p>
</li>
<li><p>使用Jenkins进行持续集成：<a href="https://www.liaoxuefeng.com/article/001463233913442cdb2d1bd1b1b42e3b0b29eb1ba736c5e000" target="_blank" rel="noopener">https://www.liaoxuefeng.com/article/001463233913442cdb2d1bd1b1b42e3b0b29eb1ba736c5e000</a></p>
</li>
</ul>
<h3 id="项目和业务"><a href="#项目和业务" class="headerlink" title="项目和业务"></a>项目和业务</h3><ul>
<li><p>常见六大<code>Web</code>安全攻防解析：<a href="https://github.com/ljianshu/Blog/issues/56" target="_blank" rel="noopener">https://github.com/ljianshu/Blog/issues/56</a></p>
</li>
<li><p>深入理解前端性能监控：<a href="https://juejin.im/post/5caaacc0e51d452b45296487#heading-5" target="_blank" rel="noopener">https://juejin.im/post/5caaacc0e51d452b45296487#heading-5</a></p>
</li>
<li><p>[📚]高性能网站建设指南：<a href="https://book.douban.com/subject/3132277/" target="_blank" rel="noopener">https://book.douban.com/subject/3132277/</a></p>
</li>
<li><p>新人如何快速融入技术实力强的前端团队：<a href="https://juejin.im/post/5cb860a86fb9a06890705f14" target="_blank" rel="noopener">https://juejin.im/post/5cb860a86fb9a06890705f14</a></p>
</li>
</ul>
<h3 id="学习提升"><a href="#学习提升" class="headerlink" title="学习提升"></a>学习提升</h3><ul>
<li><p>印记中文（各种中文开发文档）：<a href="https://www.docschina.org/" target="_blank" rel="noopener">https://www.docschina.org/</a></p>
</li>
<li><p>前端学习方法：<a href="https://github.com/helloqingfeng/Awsome-Front-End-learning-resource/tree/master/01-FE-learning-master" target="_blank" rel="noopener">https://github.com/helloqingfeng/Awsome-Front-End-learning-resource/tree/master/01-FE-learning-master</a></p>
</li>
<li><p>如何在工作内外获得持续的技术成长：<a href="https://juejin.im/post/5cbd7477f265da039d32834e" target="_blank" rel="noopener">https://juejin.im/post/5cbd7477f265da039d32834e</a></p>
</li>
<li><p>优秀的前端博客汇总：<a href="https://github.com/foru17/front-end-collect" target="_blank" rel="noopener">https://github.com/foru17/front-end-collect</a></p>
</li>
</ul>
<p>另外推荐我一直在关注的几位大佬的个人博客：</p>
<ul>
<li><p>冴羽的博客：<a href="https://github.com/mqyqingfeng/Blog" target="_blank" rel="noopener">https://github.com/mqyqingfeng/Blog</a></p>
</li>
<li><p>张鑫旭的博客：<a href="https://www.zhangxinxu.com/wordpress/" target="_blank" rel="noopener">https://www.zhangxinxu.com/wordpress/</a></p>
</li>
<li><p>左耳朵耗子：<a href="https://coolshell.cn/" target="_blank" rel="noopener">https://coolshell.cn/</a></p>
</li>
</ul>
<h3 id="技术之外"><a href="#技术之外" class="headerlink" title="技术之外"></a>技术之外</h3><ul>
<li><p>互联网术语大全：<a href="https://www.jianshu.com/p/9a7ca206c1ab" target="_blank" rel="noopener">https://www.jianshu.com/p/9a7ca206c1ab</a></p>
</li>
<li><p>互联网沟通、问答、学习的艺术：<a href="https://zhuanlan.zhihu.com/p/41431775" target="_blank" rel="noopener">https://zhuanlan.zhihu.com/p/41431775</a></p>
</li>
<li><p>经常加班至深夜，怎样才能保持身体健康：<a href="https://www.zhihu.com/question/21790919" target="_blank" rel="noopener">https://www.zhihu.com/question/21790919</a></p>
</li>
</ul>
<p>其实在这个信息发达的时代最不缺的就是资源，如何从众多的资源中获取到真正精华的部分，是非常重要的，资源在于精不在于多，强烈建议在保证深度的情况下再保证广度。</p>
<h2 id="小结"><a href="#小结" class="headerlink" title="小结"></a>小结</h2><p>希望你阅读本篇文章后可以达到以下几点：</p>
<ul>
<li><p>从知识清单中找到自己的知识盲点与欠缺</p>
</li>
<li><p>具有知识体系化的思想，开始建立自己的知识体系</p>
</li>
<li><p>阅读文章时将知识归类到知识体系中，并不断完善自己的知识体系</p>
</li>
<li><p>从文章中获取到了有用的资源</p>
</li>
</ul>
<p>文中如有错误，欢迎在评论区指正，如果这篇文章帮助到了你，欢迎点赞和关注。</p>
<p>如果你有什么好的知识、资源推荐，欢迎在评论区留言。</p>

        </div>
        <footer class="article-footer">
            



    <a data-url="https://www.lisq.xyz/2019/04/26/【自检】前端知识清单/" data-id="cjv0hxjyn000pnh0di9oy3ni2" class="article-share-link"><i class="fa fa-share"></i>分享到</a>
<script>
    (function ($) {
        $('body').on('click', function() {
            $('.article-share-box.on').removeClass('on');
        }).on('click', '.article-share-link', function(e) {
            e.stopPropagation();

            var $this = $(this),
                url = $this.attr('data-url'),
                encodedUrl = encodeURIComponent(url),
                id = 'article-share-box-' + $this.attr('data-id'),
                offset = $this.offset(),
                box;

            if ($('#' + id).length) {
                box = $('#' + id);

                if (box.hasClass('on')){
                    box.removeClass('on');
                    return;
                }
            } else {
                var html = [
                    '<div id="' + id + '" class="article-share-box">',
                        '<input class="article-share-input" value="' + url + '">',
                        '<div class="article-share-links">',
                            '<a href="https://twitter.com/intent/tweet?url=' + encodedUrl + '" class="article-share-twitter" target="_blank" title="Twitter"></a>',
                            '<a href="https://www.facebook.com/sharer.php?u=' + encodedUrl + '" class="article-share-facebook" target="_blank" title="Facebook"></a>',
                            '<a href="http://pinterest.com/pin/create/button/?url=' + encodedUrl + '" class="article-share-pinterest" target="_blank" title="Pinterest"></a>',
                            '<a href="https://plus.google.com/share?url=' + encodedUrl + '" class="article-share-google" target="_blank" title="Google+"></a>',
                        '</div>',
                    '</div>'
                ].join('');

              box = $(html);

              $('body').append(box);
            }

            $('.article-share-box.on').hide();

            box.css({
                top: offset.top + 25,
                left: offset.left
            }).addClass('on');

        }).on('click', '.article-share-box', function (e) {
            e.stopPropagation();
        }).on('click', '.article-share-box-input', function () {
            $(this).select();
        }).on('click', '.article-share-box-link', function (e) {
            e.preventDefault();
            e.stopPropagation();

            window.open(this.href, 'article-share-box-window-' + Date.now(), 'width=500,height=450');
        });
    })(jQuery);
</script>

        </footer>
    </div>
</article>


    <section id="comments">
    
        
    <div id="disqus_thread">
        <noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
    </div>

    
    </section>





<div id="roott"></div>

<button id="tocbtn">打开目录</button>


<script>
    var showToc = false;
    document.getElementById('tocbtn').onclick = function () {
        if (showToc) {
            document.getElementById('roott').innerHTML = ''
            document.getElementById('tocbtn').innerHTML = '打开目录'
        } else {
            document.getElementById('roott').innerHTML = `<aside id="article-toc" role="navigation" class="fixed">
  <div id="article-toc-inner">
    <strong class="sidebar-title">
      目录</strong>
    <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#开篇"><span class="toc-text">开篇</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#一、JavaScript基础"><span class="toc-text">一、JavaScript基础</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#变量和类型"><span class="toc-text">变量和类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#原型和原型链"><span class="toc-text">原型和原型链</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#作用域和闭包"><span class="toc-text">作用域和闭包</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#执行机制"><span class="toc-text">执行机制</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#语法和API"><span class="toc-text">语法和API</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#二、HTML和CSS"><span class="toc-text">二、HTML和CSS</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#HTML"><span class="toc-text">HTML</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#CSS"><span class="toc-text">CSS</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#手写"><span class="toc-text">手写</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#三、计算机基础"><span class="toc-text">三、计算机基础</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#编译原理"><span class="toc-text">编译原理</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#网络协议"><span class="toc-text">网络协议</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#设计模式"><span class="toc-text">设计模式</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#四、数据结构和算法"><span class="toc-text">四、数据结构和算法</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#JavaScript编码能力"><span class="toc-text">JavaScript编码能力</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#手动实现前端轮子"><span class="toc-text">手动实现前端轮子</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#数据结构"><span class="toc-text">数据结构</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#算法"><span class="toc-text">算法</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#五、运行环境"><span class="toc-text">五、运行环境</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#浏览器API"><span class="toc-text">浏览器API</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#浏览器原理"><span class="toc-text">浏览器原理</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Node"><span class="toc-text">Node</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#六、框架和类库"><span class="toc-text">六、框架和类库</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#TypeScript"><span class="toc-text">TypeScript</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#React"><span class="toc-text">React</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Vue"><span class="toc-text">Vue</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#多端开发"><span class="toc-text">多端开发</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#数据流管理"><span class="toc-text">数据流管理</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#实用库"><span class="toc-text">实用库</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#开发和调试"><span class="toc-text">开发和调试</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#七、前端工程"><span class="toc-text">七、前端工程</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#项目构建"><span class="toc-text">项目构建</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#nginx"><span class="toc-text">nginx</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#开发提速"><span class="toc-text">开发提速</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#版本控制"><span class="toc-text">版本控制</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#持续集成"><span class="toc-text">持续集成</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#八、项目和业务"><span class="toc-text">八、项目和业务</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#后端技能"><span class="toc-text">后端技能</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#性能优化"><span class="toc-text">性能优化</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#前端安全"><span class="toc-text">前端安全</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#业务相关"><span class="toc-text">业务相关</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#九、学习提升"><span class="toc-text">九、学习提升</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#十、技术之外"><span class="toc-text">十、技术之外</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#十一、资源推荐"><span class="toc-text">十一、资源推荐</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#语言基础"><span class="toc-text">语言基础</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#计算机基础"><span class="toc-text">计算机基础</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#数据结构和算法"><span class="toc-text">数据结构和算法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#运行环境"><span class="toc-text">运行环境</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#框架和类库"><span class="toc-text">框架和类库</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#前端工程"><span class="toc-text">前端工程</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#项目和业务"><span class="toc-text">项目和业务</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#学习提升"><span class="toc-text">学习提升</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#技术之外"><span class="toc-text">技术之外</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#小结"><span class="toc-text">小结</span></a></li></ol>
  </div>
</aside>`
            document.getElementById('tocbtn').innerHTML = '关闭目录'
        }
        showToc = !showToc;
    }
</script>
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src='//unpkg.com/valine/dist/Valine.min.js'></script>
<div id="vcomments" style="padding: 30px;"></div>
<script>
    new Valine({
        el: '#vcomments',
        appId: 's1xL54gwvPRsIy3ciItiPhyD-gzGzoHsz',
        appKey: 'CmP8stKpHUHtp5abbTxpqc4H'
    })
</script>
                        </div>
                    </section>
                    <aside id="sidebar">
    <a class="sidebar-toggle" title="Expand Sidebar"><i class="toggle icon"></i></a>
    <div class="sidebar-top">
        <p>
            关注我 :</p>
        <ul class="social-links">
            
            
            <li>
                <a class="social-tooltip" title="github" href="https://github.com/ConardLi"
                    target="_blank" rel="noopener">
                    <i class="icon fa fa-github"></i>
                </a>
            </li>
            
            
        </ul>
    </div>
    
    
<nav id="article-nav">
    
    
        <a href="/2019/04/17/【React深入】深入分析虚拟DOM的渲染原理和特性/" id="article-nav-older" class="article-nav-link-wrap">
        <strong class="article-nav-caption">上一篇</strong>
        <p class="article-nav-title">【React深入】深入分析虚拟DOM的渲染原理和特性</p>
        <i class="icon fa fa-chevron-left" id="icon-chevron-left"></i>
        </a>
    
</nav>

    
    <div class="widgets-container" style="background-color: #fff; border-right: 1px solid #e2e2e2;">
        
        
        
<div class="widget-wrap widget-list">
    <h3 class="widget-title">
        微信公众号
    </h3>
    <div class="widget">
        <img src="https://lsqimg-1257917459.cos-website.ap-beijing.myqcloud.com/gzh/qrcode.jpg" alt="">
    </div>
</div>

        
        

        
        
    <div class="widget-wrap">
        <h3 class="widget-title">最新文章</h3>
        <div class="widget">
            <ul id="recent-post" class="">
                
                    <li>
                        
                        <div class="item-thumbnail">
                            <a href="/2019/04/26/【自检】前端知识清单/" class="thumbnail">
    
    
        <span style="background-image:url(https://lsqimg-1257917459.cos.ap-beijing.myqcloud.com/blog/知识体系.png)" alt="【自检】前端知识清单" class="thumbnail-image"></span>
    
    
</a>

                        </div>
                        
                        <div class="item-inner">
                            <p class="item-category"></p>
                            <p class="item-title"><a href="/2019/04/26/【自检】前端知识清单/" class="title">【自检】前端知识清单</a></p>
                            <p class="item-date"><time datetime="2019-04-26T01:11:22.000Z" itemprop="datePublished">2019-04-26</time></p>
                        </div>
                    </li>
                
                    <li>
                        
                        <div class="item-thumbnail">
                            <a href="/2019/04/17/【React深入】深入分析虚拟DOM的渲染原理和特性/" class="thumbnail">
    
    
        <span style="background-image:url(https://lsqimg-1257917459.cos-website.ap-beijing.myqcloud.com/blog/react11.png)" alt="【React深入】深入分析虚拟DOM的渲染原理和特性" class="thumbnail-image"></span>
    
    
</a>

                        </div>
                        
                        <div class="item-inner">
                            <p class="item-category"></p>
                            <p class="item-title"><a href="/2019/04/17/【React深入】深入分析虚拟DOM的渲染原理和特性/" class="title">【React深入】深入分析虚拟DOM的渲染原理和特性</a></p>
                            <p class="item-date"><time datetime="2019-04-17T03:15:27.000Z" itemprop="datePublished">2019-04-17</time></p>
                        </div>
                    </li>
                
                    <li>
                        
                        <div class="item-thumbnail">
                            <a href="/2019/04/09/【React深入】从Mixin到HOC再到Hook/" class="thumbnail">
    
    
        <span style="background-image:url(https://lsqimg-1257917459.cos-website.ap-beijing.myqcloud.com/blog/hoc9.png)" alt="【React深入】从Mixin到HOC再到Hook" class="thumbnail-image"></span>
    
    
</a>

                        </div>
                        
                        <div class="item-inner">
                            <p class="item-category"></p>
                            <p class="item-title"><a href="/2019/04/09/【React深入】从Mixin到HOC再到Hook/" class="title">【React深入】从Mixin到HOC再到Hook</a></p>
                            <p class="item-date"><time datetime="2019-04-09T15:27:27.000Z" itemprop="datePublished">2019-04-09</time></p>
                        </div>
                    </li>
                
                    <li>
                        
                        <div class="item-thumbnail">
                            <a href="/2019/03/28/【浏览器和网络】全面分析前端的网络请求方式/" class="thumbnail">
    
    
        <span style="background-image:url(/img/network.jpg)" alt="全面分析前端的网络请求方式" class="thumbnail-image"></span>
    
    
</a>

                        </div>
                        
                        <div class="item-inner">
                            <p class="item-category"></p>
                            <p class="item-title"><a href="/2019/03/28/【浏览器和网络】全面分析前端的网络请求方式/" class="title">全面分析前端的网络请求方式</a></p>
                            <p class="item-date"><time datetime="2019-03-28T12:38:59.000Z" itemprop="datePublished">2019-03-28</time></p>
                        </div>
                    </li>
                
                    <li>
                        
                        <div class="item-thumbnail">
                            <a href="/2019/03/12/【前端工程】前端开发者必备的nginx知识/" class="thumbnail">
    
    
        <span style="background-image:url(/img/nginx.jpg)" alt="前端开发者必备的nginx知识" class="thumbnail-image"></span>
    
    
</a>

                        </div>
                        
                        <div class="item-inner">
                            <p class="item-category"></p>
                            <p class="item-title"><a href="/2019/03/12/【前端工程】前端开发者必备的nginx知识/" class="title">前端开发者必备的nginx知识</a></p>
                            <p class="item-date"><time datetime="2019-03-12T06:50:35.000Z" itemprop="datePublished">2019-03-12</time></p>
                        </div>
                    </li>
                
            </ul>
        </div>
    </div>

        
        
<div class="widget-wrap widget-list">
    <div class="">
        <h3 class="widget-title">标签</h3>
        <div class="widget widget-wrap-inn">
            <ul class="tag-list"><li class="tag-list-item"><a class="tag-list-link" href="/tags/学习提升/">-学习提升</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/JavaScript/">JavaScript</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/React/">React</a><span class="tag-list-count">5</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/electron/">electron</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/nginx/">nginx</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/博客搭建/">博客搭建</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/性能优化/">性能优化</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/浏览器和网络/">浏览器和网络</a><span class="tag-list-count">1</span></li></ul>
        </div>
    </div>
</div>


<style>
    .widget-wrap-inn {
        background-color: white;
        padding: 10px;
        border-radius: 5px;
        border: 1px solid #ddd;
    }
</style>
        
        
<div class="widget-wrap widget-list">
    <h3 class="widget-title">归档</h3>
    <div class="widget  widget-wrap-inn">
        <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/04/">四月 2019</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/03/">三月 2019</a><span class="archive-list-count">5</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/12/">十二月 2018</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/11/">十一月 2018</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/01/">一月 2018</a><span class="archive-list-count">1</span></li></ul>
    </div>
</div>

        
        
<div class="widget-wrap widget-list">
    <h3 class="widget-title">友情链接</h3>
    <div class="widget  widget-wrap-inn">
        <ul>
            
            <li>
                <a href="https://juejin.im/user/5bea27965188250edf4ad8b7">掘金</a>
            </li>
            
            <li>
                <a href="https://segmentfault.com/u/conardli">segmentfault</a>
            </li>
            
            <li>
                <a href="https://github.com/ConardLi">github</a>
            </li>
            
            <li>
                <a href="https://github.com/ConardLi/tpanorama">tpanorama</a>
            </li>
            
            <li>
                <a href="http://chuangzaoshi.com/">创造狮导航</a>
            </li>
            
        </ul>
    </div>
</div>

        
        
<div class="widget-wrap widget-list">
    <!-- <h3 class="widget-title">
        腾讯云专属福利
    </h3> -->
    <div class="widget">
        <a target="_blank"
            href="https://cloud.tencent.com/redirect.php?redirect=1025&cps_key=1a3e7b07487819e129852ba7a4543262&from=console">
            <img src="/img/txy.jpg" id="txy" alt="">
        </a>
    </div>
</div>



<style>
    #txy {
        width: 280px;
        border: 5px;
    }
</style>
        
        
<div class="widget-wrap widget-list">
    <div class="widget">
        <a target="_blank" href="https://promotion.aliyun.com/ntms/act/qwbk.html?userCode=y3kv7eoj">
            <img src="/img/aly.png" id="txy" alt="">
        </a>
    </div>
</div>



<style>
    #txy {
        width: 280px;
        border: 5px;
    }
</style>
        
        
    </div>
</aside>
                </div>
            </div>
        </div>
        <footer id="footer">
    <div class="container">
        <div class="container-inner">
            <a id="back-to-top" href="javascript:;"><i class="icon fa fa-angle-up"></i></a>
            <div class="credit">
                <h1 class="logo-wrap">
                    <a href="/" class="logo"></a>
                </h1>
                <p>&copy;
                    2019
                    ConardLi
                </p>
                <p>Powered by <a href="//hexo.io/" target="_blank">Hexo</a>. Theme by <a href="//github.com/ppoffice"
                        target="_blank">ConardLi</a></p>
                <script type="text/javascript">
                    var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");
                    document.write(unescape("%3Cspan id='cnzz_stat_icon_1275088352'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s22.cnzz.com/z_stat.php%3Fid%3D1275088352%26show%3Dpic' type='text/javascript'%3E%3C/script%3E"));
                </script>
                <span id="busuanzi_container_site_pv" style="margin-left:50px;">
                    本站总访问量<span id="busuanzi_value_site_pv"></span>次
                </span>
                <span id="busuanzi_container_site_uv" style="margin-left:50px;">
                    本站访客数<span id="busuanzi_value_site_uv"></span>人次
                </span>
            </div>
            <div class="footer-plugins">
                
    


            </div>
        </div>
    </div>
</footer>
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
        
    
    <script>
    var disqus_shortname = 'hexo-theme-hueman';
    
    
    var disqus_url = 'https://www.lisq.xyz/2019/04/26/【自检】前端知识清单/';
    
    (function() {
    var dsq = document.createElement('script');
    dsq.type = 'text/javascript';
    dsq.async = true;
    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
    </script>




    
        <script src="/libs/lightgallery/js/lightgallery.min.js"></script>
        <script src="/libs/lightgallery/js/lg-thumbnail.min.js"></script>
        <script src="/libs/lightgallery/js/lg-pager.min.js"></script>
        <script src="/libs/lightgallery/js/lg-autoplay.min.js"></script>
        <script src="/libs/lightgallery/js/lg-fullscreen.min.js"></script>
        <script src="/libs/lightgallery/js/lg-zoom.min.js"></script>
        <script src="/libs/lightgallery/js/lg-hash.min.js"></script>
        <script src="/libs/lightgallery/js/lg-share.min.js"></script>
        <script src="/libs/lightgallery/js/lg-video.min.js"></script>
    
    
        <script src="/libs/justified-gallery/jquery.justifiedGallery.min.js"></script>
    
    



<!-- Custom Scripts -->
<script src="/js/main.js"></script>

    </div>
</body>

</html>